<template>
	<view class="container">
		<scroll-view v-if="list.length" @scrolltolower="getNextPageData" scroll-y="true" class="scroll">
			<view class="card" v-for="(item, index) in list" :key="index">
				<view class="title flex-row">
					<view class="name">管控级别：{{ item.gk_level }}</view>
					<uni-icons type="arrowright" size="18"></uni-icons>
				</view>
				<view class="item">
					<view class="flex-row">
						<view class="people">近一月巡检数：{{ item.num_month || 0 }}</view>
						<view class="people">发现隐患数：{{ item.danger || 0 }}</view>
					</view>
					<view @click="toggleDetail(index)" class="flex-row">
						<text>查看风险内容</text>
						<uni-icons v-if="show[index]" type="arrowup" size="18"></uni-icons>
						<uni-icons v-else type="arrowdown" size="18"></uni-icons>
					</view>
					<view class="detail" v-show="show[index]">
						<!-- <view>这里显示的详情内容</view> -->
						{{ item.content || '无' }}
					</view>
				</view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
		<view v-else class="nodata">没有更多了~</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { uniIcons },
	data(){
		return {
			id: '',
			page: 1,
			total: 1,
			list: [],
			show: []
		}
	},
	onLoad(option){
		this.id = option.id;
		this.getList();
	},
	methods: {
		// 切换详情
		toggleDetail(index){
			this.show.splice(index, 1, !this.show[index]);
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: _this.$API.riskGridManageDetail,
				data: { id: _this.id },
				header: _this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					
					// 生成show
					this.show = [];
					for(let i=0,l=data.length; i<l; i++){
						this.show.push(false);
					}
					
					// 判断是第一页还是后续页
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.list();
			}
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.scroll{
	height: 100vh;
	padding: 0 20upx;
	box-sizing: border-box;
}

/*卡片*/
.card{
	background: #fff;
	margin-top: 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .item view .people{
	width: 50%;
}
.card .item .detail{
	font-size: 28upx;
	padding: 20upx 30upx;
	margin-bottom: 10upx;
	background: #F0F0F0;
	border-radius: 6upx;
}
.card .item .detail view{
	line-height: 1.6;
}
</style>
